/* playlist style */
div.poodllplaylist {
    width:397px;
    height:150px;
    overflow-y:auto;
    overflow-x:hidden;
    border:1px solid #ccc;
    padding:1px 1px 12px 1px;
    background-color:#495171;
    margin-top:5px;
    float:left;
}
 
/* playlist entry */
 div.poodllplaylist a {
    display:block;
    width:380px;
    height:18px;
    padding:3px;
    background-color:#fff;
    border:1px solid #ccc;
    font:11px "bitstream vera sans", "lucida grande",verdana;
    text-decoration:none;
    margin-top:0px;
    color:#666;
}
 
/* different states of a playlist entry */
div.poodllplaylist a:hover {
    background-color:#c0c4d5;
	color:#0;
}
 
div.poodllplaylist a.progress {
    background-color:#efefef;
	color:#0;
}
 
div.poodllplaylist a.playing {
    border:1px solid #666;
    background-color:#c0c4d5;
	color:#0;
}
 
div.poodllplaylist a.paused {
    border:1px solid #666;
    background-color:#c0c4d5;
	color:#0;
}
 
/* elements inside playlist entry */
div.poodllplaylist a img {
    border:0;
    float:left;
    margin-right:10px;
}
 
div.poodllplaylist a strong {
    color:blue;
    padding-bottom:5px;
}
 
div.poodllplaylist a em {
    border:0;
    float:left;
    margin-right:10px;
    background:url(/media/img/demos/clock.gif) no-repeat 0 50%;
    padding-left:20px;
    color:#333;
    font-style:normal;
    margin-top:10px;
}

/* root element should be positioned relatively so that
    child elements can be positioned absolutely */
.fpjscontrols {
    position:relative;
    height:40px;

    /* black background with a gradient */
    background:#000 url(/filter/poodll/flowplayer/fpjscontrols.png) repeat-x 0 -4px;
    width:400px;
}

/* play/pause button */
.fpjscontrols .play, .fpjscontrols .pause {
    position:absolute;
    width: 46px;
    height: 40px;
    display:block;
    text-indent:-9999em;
    background:url(/filter/poodll/flowplayer/fpjscontrols.png) no-repeat 10px -61px;
    cursor:pointer;
    border-right:1px solid #000;
}

.fpjscontrols .play:hover {
    background-position:10px -105px;
}

/* pause state */
.fpjscontrols .pause {
    background-position:11px -148px;
}

.fpjscontrols .pause:hover {
    background-position:11px -192px;
}

/* the timeline (or "scrubber")  */
.fpjscontrols .track {
    left:47px;
    position:absolute;
    cursor:pointer;
    width:185px;
    border-left:1px solid #999;
    height:40px;
}

/* the draggable playhead */
.fpjscontrols .playhead {
    position:absolute;
    cursor:pointer;
    background-color:#4ff;
    opacity:0.3;
    filter: alpha(opacity=30);
    width:3px;
    height:40px;
    border-right:1px solid #444;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
.fpjscontrols .progress, .fpjscontrols .buffer {
    position:absolute;
    background-color:#4ff;
    filter: alpha(opacity=10);
    opacity:0.1;
    width:0px;
    height:40px;
}

.fpjscontrols .buffer {
    background-color:#fff;
    opacity:0.1;
    filter: alpha(opacity=10);
}

/* time display */
.fpjscontrols .time {
    position:absolute;
    width:129px;
    left:230px;
    padding:12px 0;
    text-align:center;
    border:1px solid #999;
    border-width:0 1px;
    font-size:12px;
    color:#fff;
}

/* total duration in time display */
.fpjscontrols .time strong {
    font-weight:normal;
    color:#666;
}

/* mute / unmute buttons */
.fpjscontrols .mute, .fpjscontrols .unmute {
    position:absolute;
    left:360px;
    width:40px;
    height:40px;
    text-align:center;
    padding:8px 0;
    cursor:pointer;
    text-indent:-9999em;
    background:url(/filter/poodll/flowplayer/fpjscontrols.png) no-repeat 5px -323px;
}

.fpjscontrols .mute:hover {
    background-position:5px -367px;
}

/* unmute state */
.fpjscontrols .unmute {
    background-position:5px -235px;
}

.fpjscontrols .unmute:hover {
    background-position:5px -279px;
}

/* For HTML5 Uploads */
#p_progress p
{
	display: none;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
	background: #eee url("/filter/poodll/progress.png") 100% 0 repeat-y;
}

#p_progress p.success
{
	background: #0c0 none 0 0 no-repeat;
}

#p_progress p.failed
{
	background: #c00 none 0 0 no-repeat;
}


.p_btn {
display: inline-block;
cursor: pointer;
padding: 7px 10px;
font-weight: 700;
line-height: 1;
color: white;
background: #345;
border: 0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}



.p_btn_wrapper {
display: inline-block;
margin: 0;
position: relative;
overflow: hidden;
cursor: pointer;
}

.p_btn_wrapper [type="file"] {
position: absolute;
top: 0;
left: 0;
height: 45px;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
cursor: pointer;
}


.p_scrollbox {
	position: relative;
}

.xaxis{
	white-space: pre;
	display: inline-block;
}

.p_scrollboxcontainer {
    overflow: hidden;
    border : 1px solid black;
    padding: 3px;
    position: relative;
}

.p_scroll_btn_wrapper {
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
}

.p_scroll_btn_wrapper .p_btn {
background: #E20022;
position: relative;
top: -50%;
left: -50%;

}